<template>
  <div v-if="show">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :show-indicators="false"
    >
      <van-swipe-item v-for="(item, index) in tj" :key="index">
        <div class="lb" v-for="(v, i) in item" :key="i">
          <ul class="lb_1">
            <li><img :src="v.picUrl" alt="" /></li>
            <li>
              <p>{{ v.name }}</p>
              <p>{{ v.song.artists[0].name }}</p>
            </li>
            <li>
              <van-icon name="play-circle-o" size="7vw" @click="bf(v, i)" />
            </li>
          </ul>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  props: {
    tj: {
      default: () => [],
    },
  },
  watch: {
    tj: {
      handler: function (a) {
        console.log(a);
        if (a.length > 0) {
          this.show = true;
        }
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    bf(val, index) {
      this.$store.dispatch("music", val);
      console.log(this.$store.state.musicUrls);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: rgb(6, 6, 6);
  font-size: 20px;
  //   background-color: #1c1b1b;
  width: 100%;
}
.lb {
  width: 100%;
  .lb_1 {
    width: 100%;
    display: flex;
    padding: 0vw 2vw;

    li {
      margin: 2vw 0vw;
      //   padding: 0vw 2vw;
      img {
        width: 100%;
        height: 100%;
      }
      &:nth-child(1) {
        flex: 1;
      }
      &:nth-child(2) {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 4vw;
        padding-left: 3vw;
        background-color: rgba(158, 158, 158, 0.075);
      }
      &:nth-child(3) {
        flex: 1;
        display: flex;
        justify-content: center;
        background-color: rgba(158, 158, 158, 0.075);
        align-items: center;
        border-left: 1px solid rgba(158, 158, 158, 0.075);
      }
    }
  }
}
</style>